<template>
  <el-container>
    <el-header>
      <el-button class="export-btn  float-left" type="primary" round>{{lang._011}}</el-button>
      <!-- 导出按钮 -->
      <el-button class="btn  float-left" type="primary" round>{{lang._043}}</el-button>
      <!-- 保存成图片按钮 -->
      <el-button class="btn  float-left" type="primary" round>{{lang._044}}</el-button>
      <!-- 显示表格按钮 -->

      <el-button class="float-right search-btn" type="primary" round>{{lang._012}}</el-button>
      <el-date-picker class="dataTime float-right" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="|"
        start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right">
      </el-date-picker>

      <!-- 时间选择 -->

      <el-select class="select-input float-right radius-left" v-model="value2" placeholder="按小时">
        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
        </el-option>
      </el-select>
      <!-- 下拉选择 -->
    </el-header>
    <el-main>
      <div style="width:1500px;margin:0 auto">
        <canvas id="myChart"></canvas>
      </div>
    </el-main>
  </el-container>
</template>
<style lang="less" scoped>
  .el-header {
    .export-btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
      margin-left: 0;
    }
    .dataTime {
      border: 1px solid #409eff;
      color: #409eff;
      border-radius: 0;
      height: 30px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
    }
  }

</style>

<script>
  import Chart from 'chart.js';
  export default {
    props:['lang'],
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataTime: '',
        //时间选择器
        value2: '',
        // 按小时下拉选择
      }
    },
    mounted: function () {
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ["2017.12.01", "2017.12.03", "2017.12.05", "2017.12.07", "2017.12.09", "2017.12.11",
            "2017.12.13", "2017.12.15", "2017.12.17", "2017.12.19",
            "2017.12.21", "2017.12.23", "2017.12.25", "2017.12.27", "2017.12.29", "2017.12.31"
          ],
          datasets: [{
              label: '销售总额',
              data: [12, 99, 5, 8, 6, 11, 55, 66, 33, 22, 11, 55, 99, 65, 32, 47],
              backgroundColor: '#409eff',
              borderColor: '#409eff',
              borderWidth: 1
            }, {
              label: '商品数量',
              data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3],
              backgroundColor: 'rgb(245,108,108)',
              borderColor: 'rgb(245,108,108)',
              borderWidth: 1
            },
            {
              label: '利润',
              data: [0, 99, 66, 22, 44, 55, 32, 17, 58, 69, 41, 23, 85, 46, 12, 36],
              backgroundColor: 'rgb(103,194,58)',
              borderColor: 'rgb(103,194,58)',
              borderWidth: 1
            },
            {
              label: '毛利润',
              data: [9, 8, 77, 66, 22, 33, 77, 88, 55, 62, 30, 12, 17, 45, 85, 96],
              backgroundColor: 'rgb(230,162,60)',
              borderColor: 'rgb(230,162,60)',
              borderWidth: 1
            }
          ]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,

              }
            }]
          },
          title: {
            display: true,
            text: '营业趋势分析',
            position: 'top',
            fontSize: '20'
          }
        }
      });
      // myChart.canvas.parentNode.style.height = '400px';
    }
  }
</script>


<style scoped>
  .el-header,
  .el-footer {
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid rgba(96, 98, 102, 0.2);
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  canvas {
    width: 40px;
    height: 40px;
  }
</style>
<style>
  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

  .select-input {
    height: 28px;
    line-height: 28px;
    border: 1px solid #409eff;
    border-right: none;
    margin-top: 15px;
    overflow: hidden;
  }
  .radius-left{
    border-radius:14px 0 0 14px;
  }
  .el-input__inner {
    height: 30px;
    line-height: 30px;
    border: none;
  }
  
</style>
